<template>
  <div class="headerContainer">
    <div class="titleContainer">
      <div> <img class="text" src="../../../public/logo.svg" @click="goHome" /></div>

      <van-search placeholder="搜索" class="search" shape="round" />
      <van-button class="btn" round size="small">打开APP</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'searchHeader',
})

</script>
<script lang="ts" setup>
const router: any = useRouter()
const goHome = () => {
  router.push({ path: '/list' })
}
</script>

<style lang="less" scoped>
.headerContainer {
  background-color: #ffffff;
  z-index: 999;
  height: 50px;
  position: fixed;
  // margin-bottom: 10px;
  .titleContainer {
    position: fixed;
    top: 0;
    width: 100vw;
    display: flex;
    align-items: center;
    padding: 15px 15px 5px 15px;
    height: 50px;
    position: fixed;
    box-sizing: border-box;
    background-color: #ffffff;
    .text {
      padding-right: 10px;
      white-space: nowrap;
      // font-size: 18px;
      color: #f86422;
      width: 95px;
    }

    .search {
      border-radius: 40px;
      width: 210px;
      flex: 1;
    }

    .btn {
      color: #f86422;
      border: 1px solid #f86422;
      font-size: 15px;
      // box-sizing: border-box;
      padding: 5px;
    }
  }
}
</style>
